// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://fonts.googleapis.com/css?family=Exo');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-icons/font/bootstrap-icons';
@import 'aos/dist/aos.css';

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  font-family: $title-font-family-sans-serif !important;
}

//Бегущая строка
.marquee{
    font-family: $title-font-family-sans-serif;
    overflow: hidden;
    font-size: 5rem;
}

.rounded-lt{
  border-radius: 0.5rem 0 0 0!important;
}

.brandText {
    color: $dark;
    text-decoration: none;
    white-space: nowrap;
    &:hover{
      color: $info;
    }
}

.brandLogo{
  cursor: pointer;
  color: $white;
}

#humburgerIcon{
  transition: all .5s ease-in-out;
  &:hover{
    transform: rotate(1turn);
    color: $info;
  }
}

.btn-close{
  transition: all .5s ease-in-out;
  &:hover{
    transform: rotate(1turn) scale(1.3);
  }
}
//Меню и навигация
.nav-link {
    font-size: 1rem;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color:$dark;
    transition: color 0.35s ease-in-out;
    &:hover{
      color: $info;
    }
}

#menu .nav-link {
    font-size: 2.5rem;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color:$white;
    transition: color 0.35s ease-in-out;
    &:hover{
      color: $yellow;
    }
}

#menu .submenu{
  .nav-link {
      font-size: 2rem;
      display: block;
      padding: 0.5rem 1rem;
      text-decoration: none;
      color:$secondary;
      transition: color 0.35s ease-in-out;
      &:hover{
        color: $indigo;
      }
  }
}

.contact-link{
  color: $secondary;
  text-decoration: none;
  background-image: radial-gradient($indigo, $indigo);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0% 0%;
  transition: background-size .5s, color .5s;
  &:hover{
    background-size: 100% 100%;
    color: $white;
  }
}

.btn-outline-primary:hover {
    color: $white;
}
.textures-card IMG{
  cursor: pointer;
  position: relative;
  &:nth-child(1){
    z-index: 1;
    transition: all .5s ease-in-out;
  }
  &:nth-child(2){
    z-index: 2;
    right: 300px;
    margin-top: 40px;
    transition: all .5s ease-in-out;
  }
  &:nth-child(3){
    z-index: 3;
    right: 600px;
    margin-top: 80px;
    transition: all .5s ease-in-out;
  }

  &:nth-child(n):hover{
    transform: translate(20px) skew(2deg, 2deg) scale(0.95);
  }
}
